<template>
	<view>
		<view class="list">
			<view class="title" @click="show=true">
				反馈类型
				<view class="title-1">
					<text v-if="reasonType">{{reasonType}}</text>
					<u-icon name="arrow-right" size="14" color="#333333"></u-icon>
				</view>

			</view>
		</view>
		<view class="list">
			<view class="title">
				补充信息
			</view>
			<view class="con1">
				<u--textarea height="100" border="none" v-model="contentValue" placeholder="请输入举报内容..." count
					maxlength="60"></u--textarea>
			</view>
			<view class="title">
				反馈照片
			</view>
			<view class="content">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:minCount="4" :maxCount="10">
					<view class="btn">
						<image src="https://pw.qyang.cc/static/pic-add.png" mode=""></image> 添加图片
					</view>
				</u-upload>
			</view>
		</view>

		<view class="bottom">
			<view class="btn" @click="submit">提交</view>
		</view>
		<u-picker :show="show" :columns="[feedbackTypeList]" keyName="feedback_name" @confirm="confirm"  @cancel="show=false" @close="show=false"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				isSelected: 0,
				isSelected2: 0,
				fileList1: [],
				contentValue: '',
				reasonType: '',
				columns: [
					[{
							label: '添加个人聊天工具',
							id: 2021
						}, {
							label: '饭托/酒托',
							id: 804
						}, {
							label: '骚扰',
							id: 804
						},
						{
							label: '辱骂人',
							id: 804
						}
					]
				],
				tablist1: [{
					name: '非常好',
				}, {
					name: '不错',
				}, {
					name: '一般'
				}, {
					name: '不行',
				}, {
					name: '很差'
				}],
				tablist2: [{
					name: '有耐心',
				}, {
					name: '机制',
				}, {
					name: '勇敢'
				}],
				feedbackTypeList:[],
				feedbackId:0,
				id:0
			};
		},
		onLoad(option) {
			this.id=option.id
			this.getData()
		},
		methods: {
			getData(){
				this.getFeedbackType()
				// daren/feedback_type
			},
			getFeedbackType(){
				var that=this
				this.rq.getData('daren/feedback_type').then(res=>{
					  this.feedbackTypeList=res.data
				})
			},
			selectTab(index) {
				this.isSelected = index;
			},
			selectTab2(index) {
				this.isSelected2 = index;
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			// afterRead(event) {
			// 	for (let i = 0; i < event.file.length; i++) {
			// 		this.fileList1.push(
			// 			event.file[i]
			// 		)
			// 	}
			// },
			// 新增图片
			afterRead(event) {
				uni.showLoading({
					mask: true,
					title: '正在上传'
				})
				console.log("urls")
				var _this=this
				var app=getApp()
				for (let i = 0; i < event.file.length; i++) {
					app.uploadFile([event.file[i].url], {}, (url) => {
						console.log(url)
						_this.fileList1.push({url:url})
						uni.hideLoading()
					})
				}
			},
			confirm(e) {
				this.show = false
				this.reasonType = e.value[0].feedback_name
				this.feedbackId = e.value[0].id
			},
			submit() {
				
				var that=this
				if(!this.feedbackId){
					uni.showToast({
						title:"请选择反馈类型",
						icon:'none'
					})
					return;
				}
				if(!this.contentValue){
					uni.showToast({
						title:"请描述您要举报的内容",
						icon:'none'
					})
					return;
				}
				var data={
					describe:this.contentValue,
					type_id:this.feedbackId,
					image:this.fileList1.join(','),
					order_id:this.id
				};
				this.rq.getData('daren/feedback',data).then(res=>{
					  
					  uni.showToast({
						title:res.msg,
						icon:'none'
					  })
					  setTimeout(()=>{
						  uni.navigateBack()
					  },1500)
				})
			
			}
		}
	}
</script>

<style lang="scss">
	.list {
		width: 84%;
		margin: 20rpx auto;
		padding: 30rpx;
		border-radius: 8px;
		opacity: 1;
		background: #FFFFFF;

		.title {
			font-family: PingFang SC;
			font-size: 16px;
			font-weight: normal;
			line-height: 15px;
			letter-spacing: 0px;
			color: #333333;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title-1 {
				font-family: PingFang SC;
				font-size: 14px;
				font-weight: normal;
				line-height: 15px;
				letter-spacing: 0px;
				display: flex;
				align-items: center;

				text {
					margin-right: 20rpx;
				}
			}
		}

		.con1 {
			margin: 20rpx 0;

			.text {
				font-family: PingFang SC;
				font-size: 14px;
				font-weight: normal;
				line-height: 14px;
				letter-spacing: 0px;
				color: #666666;
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
			}
		}

		.tabs {
			background-color: #ffffff;
			margin: 40rpx 0 20rpx;

			.tabs-1 {
				display: flex;
				height: 50rpx;
				margin: 20rpx 0;
			}

			.tabs-2 {
				width: 120rpx;
				justify-content: center;
				align-items: center;
				display: flex;
				margin-right: 30rpx;
				font-family: PingFang SC;
				font-size: 13px;
				font-weight: normal;
				line-height: 15px;
				text-align: center;
				letter-spacing: 0px;
				color: #FF7681;
				background: #FFEEEF;
				box-sizing: border-box;
				border: 1px solid #FF7681;
				border-radius: 22px;
			}

			.tabs-2.active {
				position: relative;
				line-height: 15px;
				transition: all 0.3s ease;
				border-radius: 22px;
				opacity: 1;
				background: #FF7883;
				font-family: PingFang SC;
				font-size: 13px;
				font-weight: normal;
				letter-spacing: 0px;
				font-variation-settings: "opsz" auto;
				color: #FFFFFF;
				padding: 0 10rpx;
			}
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		z-index: 1;

		.btn {
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 38rpx;
			text-align: center;
			line-height: 88rpx;
			margin: 15rpx 64rpx;
			background: #FF5866;
			border-radius: 102px;
			border: 1px solid #FF5866;
		}
	}

	.content {
		padding: 30rpx 0;

		.btn {
			width: 160rpx;
			height: 160rpx;
			border-radius: 8px;
			opacity: 1;
			background: #F7F7F7;
			box-sizing: border-box;
			border: 0.5px solid #C4C4C4;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 10px;
			font-weight: normal;
			line-height: 14px;
			letter-spacing: 0px;

			color: #B8B8B8;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-bottom: 20rpx;
			}
		}
	}
</style>